import React from "react";
import { Row, Col, Button, Input, Form, Select, DatePicker, Table } from "antd";
import moment from "moment";
import PropTypes from "prop-types";
import styles from "./index.less";
import { filterState } from "utils/filter";
import { formatDate } from "utils";

const Option = Select.Option;
const FormItem = Form.Item;
const { RangePicker, MonthPicker } = DatePicker;
let borrowApplyStartAt = "";
let borrowApplyEndAt = "";
let startTime = "";
let endTime = "";
let createdTime = ""; //收件日期
let notarizationAt = ""; //公证日期
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 }
};
const Golist = ({
  form: { validateFields, getFieldsValue, getFieldDecorator, getFieldValue },
  handleSearch,
  goDetails,
  userList,
  borrowHistoryList,
  borrowHistoryDetails,
  ...tabProps
}) => {
  const userLists = [];
  for (let i = 0; i < userList.length; i++) {
    userLists.push(<Option key={userList[i].username} value={userList[i].username}>{userList[i].username}</Option>);
  }
  const onChangeNotariza = (date, dateString) => {
    if (date && dateString) {
      notarizationAt = dateString
    }
  };
  const onChangeCreate = (date, dateString) => {
    if (date && dateString) {
      createdTime = dateString
    }
  };
  const params = {
    createdTime,
    notarizationAt,
    // documentYear: getFieldValue("documentYear") || "",
    notarialMatters: getFieldValue("notarialMatters") || "",
    // state: getFieldValue("state") || "",
    applyName: getFieldValue("applyName") || "",
    contractorUserName: getFieldValue("contractorUserName") || "",
    createdUserName: getFieldValue("createdUserName") || "",
    idcard: getFieldValue("idcard") || "",
		notaryNumber: getFieldValue("notaryNumber") || "",
  };

  const handleSubmit = () => {
    if (createdTime == "") {
      delete params.createdTime
    }
    if (notarizationAt == "") {
      delete params.notarizationAt
    }
    handleSearch(params);
  };

  const onChange = (date, dateString) => {
    if (date && dateString) {
      (borrowApplyStartAt = dateString[0]), (borrowApplyEndAt = dateString[1]);
    }
  };
  const onChange1 = (date, dateString) => {
    if (date && dateString) {
      (startTime = dateString[0]), (endTime = dateString[1]);
    }
  };
  const columns = [
    {
      title: "申请人",
      dataIndex: "applyName",
      key: "applyName",
    }, {
      title: "身份证号码",
      dataIndex: "idcard",
      key: "idcard",
    }, {
      title: "公证事项",
      dataIndex: "notarialMatters",
      key: "notarialMatters",
    }, {
      title: "公证号码",
      dataIndex: "notaryNumber",
      key: "notaryNumber"
    }, {
      title: "承办人",
      dataIndex: "contractorUserName",
      key: "contractorUserName",
    }, {
      title: "建档人",
      dataIndex: "createdUserName",
      key: "createdUserName",
    }, {
      title: "收件日期",
      dataIndex: "createdTime",
      key: "createdTime",
      render: (text, record) => {
        return (
          <p>
            {
              moment(record.createdTime).format("YYYY-MM-DD")
            }
          </p>
        )
      }
    }, {
      title: "公证日期",
      dataIndex: "notarizationAt",
      key: "notarizationAt",
      render: (text, record) => {
        return (
          <p>
            {
              moment(record.notarizationAt).format("YYYY-MM-DD")
            }
          </p>
        )
      }
    },
    {
      title: "操作",
      key: "operation",
      render: (record, text) => {
        return (
          <div>
            <a onClick={() => goDetails(record.id)}>查看借阅历史</a>
          </div>
        );
      }
    }
  ];
  return (
    <div>
      <div
        className={styles.filterContent}
        style={{
          border: "1px dashed #e1e1e1",
          borderRadius: 4,
          paddingTop: 20,
          marginBottom: 20
        }}
      >
        <h2 className={styles.searchTerm}>查询条件</h2>
        <Form>
          <Row type="flex" justify="space-between">
            {/* <Col span={6}>
              <FormItem {...formItemLayout} label="档案年度">
                {getFieldDecorator("documentYear")(
                  <Select
                    style={{ width: "100%" }}
                    placeholder="请选择档案年度"
                  >
                  <Option key="" value="">请选择</Option>
                  <Option key="2018" value="2018">2018</Option>
                  <Option key="2017" value="2017">2017</Option>
                  <Option key="2016" value="2016">2016</Option>
                  <Option key="2015" value="2015">2015</Option>
                  <Option key="2014" value="2014">2014</Option>
                  <Option key="2013" value="2013">2013</Option>
                  <Option key="2012" value="2012">2012</Option>
                  <Option key="2011" value="2011">2011</Option>
                  <Option key="2010" value="2010">2010</Option>
                  <Option key="2009" value="2009">2009</Option>
                  <Option key="2008" value="2008">2008</Option>
                  <Option key="2007" value="2007">2007</Option>
                  <Option key="2006" value="2006">2006</Option>
                  <Option key="2005" value="2005">2005</Option>
                  <Option key="2004" value="2004">2004</Option>
                  <Option key="2003" value="2003">2003</Option>
                  <Option key="2002" value="2002">2002</Option>
                  <Option key="2001" value="2001">2001</Option>
                  <Option key="2000" value="2000">2000</Option>
                  </Select>
                )}
              </FormItem>
            </Col> */}
            {/* <Col span={6}>
              <FormItem {...formItemLayout} label="公证事项">
                {getFieldDecorator("notarialMatters")(
                  <Input
                  placeholder="请输入公证事项"
                  onChange={this.businesChange.bind(this)}
                  style={{ width: 200 }}
                />
                )}
              </FormItem>
            </Col> */}
            {/* <Col span={6}>
              <FormItem {...formItemLayout} label="档案状态">
                {getFieldDecorator("state")(
                  <Select
                    style={{ width: "100%" }}
                    placeholder="请选择档案状态"
                  >
                    <Option key="" value="">请选择</Option>
                    <Option value="0">未归档</Option>
                    <Option value="1">已归档</Option>
                    <Option value="2">拒绝</Option>
                  </Select>
                )}
              </FormItem>
            </Col> */}
            <Col span={6}>
              <FormItem {...formItemLayout} label="申请人员">
                {getFieldDecorator("applyName")(
                  <Input placeholder="请输入申请人" />
                )}
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem {...formItemLayout} label="身份证号">
                {getFieldDecorator("idcard")(
                  <Input
                    placeholder="请输入身份证号"
                  />
                )}
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem {...formItemLayout} label="公证事项">
                {getFieldDecorator("notarialMatters")(
                  <Input
                    placeholder="请输入公证事项"
                  />
                )}
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem {...formItemLayout} label="公证号">
                {getFieldDecorator("notaryNumber")(
                  <Input
                    placeholder="请输入公证号"
                  />
                )}
              </FormItem>
            </Col>
          </Row>
          <Row>
            <Col span={6}>
              <FormItem {...formItemLayout} label="承办人">
                {getFieldDecorator("contractorUserName")(
                  <Select
                    style={{ width: "100%" }}
                    placeholder="请选择承办人"
                  >
                    <Option key="" value="">请选择</Option>
                    {userLists}
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem {...formItemLayout} label="建档人">
                {getFieldDecorator("createdUserName")(
                  <Select
                    style={{ width: "100%" }}
                    placeholder="请选择建档人"
                  >
                    <Option key="" value="">请选择</Option>
                    {userLists}
                  </Select>
                )}
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem {...formItemLayout} label="收件日期">
                {getFieldDecorator("range-picker")(
                  <DatePicker style={{ width: "100%" }} onChange={onChangeCreate} />
                )}
              </FormItem>
            </Col>
            <Col span={6}>
              <FormItem {...formItemLayout} label="公证日期">
                {getFieldDecorator("notarizationAt")(
                  <DatePicker style={{ width: "100%" }} onChange={onChangeNotariza} />
                )}
              </FormItem>
            </Col>
          </Row>
        </Form>
        <Row type="flex" justify="center">
          <Col span={2}>
            <Button
              className={styles.btn}
              type="primary"
              onClick={handleSubmit}
            >
              查询
            </Button>
          </Col>
        </Row>
      </div>
      <Table columns={columns} {...tabProps} />
    </div>
  );
};

Golist.propTypes = {
  location: PropTypes.object,
  dispatch: PropTypes.func
};

export default Form.create()(Golist);
